<template>
    <div class="assignment-header">
        <button class="back-button" @click="$router.push('/teacher/dashboard')">← 聊天室</button>
        <div class="user-info" @click="toggleDropdown">
            <img class="avatar" src="@/assets/images/rainbow.jpg" alt="User Avatar">
            <span class="username">当前用户</span>
            <img class="dropdown-arrow" src="@/assets/svgs/downnarrow.svg" alt="Dropdown Arrow">
            <div v-if="dropdownVisible" class="dropdown-menu">
                <p @click="navigateTo('profile')">个人信息</p>
                <p @click="navigateTo('logout')">退出登录</p>
            </div>
        </div>
    </div>
    <div class="chat-room">
        <div class="messages">
            <div v-for="(message, index) in messages" :key="index" class="message1">
                <img :src="message.avatar" alt="avatar" class="avatar-icon">
                <div class="message-content">
                    <span :class="{ 'user': message.user === 'you', 'other': message.user !== 'you' }">
                        {{ message.text }}
                    </span>
                </div>
                <br>
                <br>
            </div>
        </div>
        <div class="input-area">
            <el-input v-model="newMessage" placeholder="请输入内容" @keyup.enter="sendMessage" class="input-box" />
            <el-button type="primary" @click="sendMessage">发送</el-button>
        </div>
    </div>
    <div class="right">
        <div class="user-room">
            <span>聊天室用户列表</span>
            <div >
                <!-- <img :src="message.avatar" alt="avatar" class="avatar-icon"> -->
                <span>用户1</span>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import userAvatar from '@/assets/images/user.png';

const dropdownVisible = ref(false);
const toggleDropdown = () => {
    dropdownVisible.value = !dropdownVisible.value;
};

const messages = ref([
    { user: 'you', text: '欢迎来到聊天室', avatar: userAvatar },
]);

const newMessage = ref('');
const sendMessage = () => {
    if (newMessage.value.trim()) {
        messages.value.push({ user: 'you', text: newMessage.value, avatar: userAvatar });
        newMessage.value = '';
    }
};
</script>

<style scoped>
.assignment-header {
    display: flex;
    height: 7lvh;
    width: 99.5lvw;
    background-color: #13227A;
    color: white;
}

.back-button {
    background-color: transparent;
    margin-left: 1%;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
}

.back-button:hover {
    color: #d72d2d;
}


.user-info {
    position: relative;
    align-items: center;
    cursor: pointer;
    display: flex;
    margin-left: 82%;
    z-index: 999;
}

.avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}

.dropdown-arrow {
    width: 16px;
    height: 16px;
    margin-left: 5px;

}

.username {
    font-size: 16px;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    color: black;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;
    z-index: 1000;
}

.chat-room {
    float: left;
    display: flex;
    flex-direction: column;
    height: 87lvh;
    width: 50lvw;
    padding: 5px;
    border: 1px solid #eee;
    border-radius: 4px;
    background-color: #ededed;
}

.messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.message1 {
    margin-bottom: 10px;
}

.message-content {
    display: flex;
    float: left;
    margin-left: 1px;
}

.user {
    background-color: #ffffff;
    color: rgb(47, 45, 45);
    padding: 5px 10px;
    border-radius: 5px;
    margin-right: 5px;
    /* border: 1px solid #1c1a48; */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.other {
    background-color: #f9f9f9;
    color: #333;
    padding: 5px 10px;
    border-radius: 5px;
    margin-left: 5px;
}

.input-area {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.input-box {
    flex: 1;
    margin-right: 10px;
}

.el-button {
    padding: 5px 10px;
}

.avatar-icon {
    width: 30px;
    float: left;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
    /* 头像与消息文本之间的间距 */
}

.message-content {
    display: flex;
    align-items: flex-start;
    /* 消息内容与头像之间的间距 */
}

.right {
    position: absolute;
    width: 48.5lvw;
    height: 89lvh;
    float: left;
    margin-left: 51lvw;
}

.user-room {
    float: left;
    display: flex;
    
}

</style>